<template>
  <div class="app-container">
    <div style="padding:10px 0"><el-button size="mini" type="primary" class="btn-add" @click="showDialog('add')">新增行业</el-button></div>
    <el-table ref="productTable"
                :data="data"
                default-expand-all
                row-key="typeId"
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                style="width: 100%;font-size: 12px;"
                v-loading="dataLoading"
                border>
        <el-table-column label="行业名称"  align="left" min-width="100" header-align="center">
          <template slot-scope="scope"><span style="padding-left:15px">{{scope.row.typeName}}</span></template>
        </el-table-column>

        <el-table-column label="排序"  align="center" min-width="150">
          <template slot-scope="scope">{{scope.row.sort}}</template>
        </el-table-column>

        <el-table-column label="状态"  align="center" min-width="100">
          <template slot-scope="scope">
            <el-switch
              @change="changeStatus(scope.row)"
              v-model="scope.row.status"
              :active-value="1"
              :inactive-value="2">
            </el-switch>
          </template>
        </el-table-column>

        <el-table-column label="操作"  align="center" min-width="150">
          <template slot-scope="scope">
            <el-button
              type="text" @click="showDialog('edit',scope.row)">
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    <!--新增/编辑行业-->
    <el-dialog
      :close-on-click-modal="false"
      :title="title"
      :beforeClose="beforeClose"
      :visible.sync="dialogVisible"
      width="420px">
      <el-form :model="departmentForm" size="mini" label-width="120px" :rules="rules" ref="departmentForm">
        <el-form-item label="行业名称：" prop="typeName">
          <el-input v-model="departmentForm.typeName" placeholder="行业名称"></el-input>
        </el-form-item>
        <el-form-item label="父级：">
          <el-cascader
            v-model="departmentForm.parentId"
            :options="data2"
            :props="{ checkStrictly: true,value:'typeId',label:'typeName',emitPath:false}"
            clearable>
          </el-cascader>
        </el-form-item>
        <el-form-item label="排序：">
          <el-input v-model="departmentForm.sort" style="width:100px"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="handleConfirm" :loading="btnLoading">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {getStaffsList,postStaffsEdit,getRoleList,delSellerItem,getDeptList,saveDept,delDept,changeUserInfo} from '@/api/management'
import {productCustomersTreeTypeList,productCustomersAddType,productCustomersUpdateType} from '@/api/company'
import {validatePhone,validateInt} from '@/utils/validate';
import store from '@/store'
const defaultListQuery = {
  keyword:null,
  isDepartManage:'',
  pageNum: 1,
  pageSize: 10,
};

const defaultDepartmentForm = {
  typeId:'',
  typeName:'',
  parentId:'',
  status:1,
  sort :0,
};
export default {
  name: "employeeSetting",
  data(){
    return{
      data : [],
      data2:[],
      title:'',
      dialogVisible:false,

      departmentForm:JSON.parse(JSON.stringify(defaultDepartmentForm)),
      rules: {
        typeName:[{required: true, message: '此项必填', trigger: 'blur'},],
      },

      isEdit:true,
      btnLoading:false,

      dataLoading:false,

    }
  },
  created() {
    this.getList();

  },
  computed: {

  },

  filters: {

  },

  methods:{
    //修改状态
    changeStatus(item){
      let pa = {};
      pa.typeId = item.typeId;
      pa.status = item.status;
      productCustomersUpdateType(pa).then(()=>{
        this.$message({
          type: 'success',
          message: '操作成功'
        });
        this.getList();
      })
    },



    //去除不要的children
    forTree(list){
      let newList = list;
      if(newList.length){
        for (let i = 0; i<newList.length; i++){
          if(newList[i].children && newList[i].children.length > 0){
            this.forTree(newList[i].children)
          }else{
            delete newList[i].children;
          }
        }
        return newList
      }
    },

    //获取分类列表
    getList(){
      this.dataLoading = true;
      productCustomersTreeTypeList({code:2}).then((res)=>{
        this.data = res;
        this.data2 = [];
        this.data2 = this.forTree(this.data);
        this.dataLoading = false;
      })
    },

    //显示新增客户行业
    showDialog(type,item){
      this.title = type == 'add' ? '新增客户行业' : '编辑客户行业';
      this.isEdit = type != 'add';
      if(this.isEdit){
        this.departmentForm.typeName = item.typeName;
        this.departmentForm.typeId = item.typeId;
        this.departmentForm.parentId = item.parentId;
        this.departmentForm.sort  = item.sort;
        this.departmentForm.status = item.status;
      }else{
        this.departmentForm = JSON.parse(JSON.stringify(defaultDepartmentForm));
      }
      this.dialogVisible = true;
    },

    //关闭分类弹窗之前
    beforeClose(){
      this.dialogVisible = false;
      this.$refs.departmentForm.clearValidate();
    },
    //关闭分类弹窗
    handleClose(){
      this.dialogVisible = false;
      this.$refs.departmentForm.clearValidate();
    },

    //新增/编辑客户行业
    handleConfirm(){
      this.$refs.departmentForm.validate((valid) => {
        if (valid) {
          this.btnLoading = true;
          let data = JSON.parse(JSON.stringify(this.departmentForm));
          data.parentId = data.parentId == '' ? 0 : data.parentId;
          data.code = 2;
          let fn = this.isEdit ? productCustomersUpdateType : productCustomersAddType;
          fn(data).then(response=>{
            this.dialogVisible = false;
            this.$refs.departmentForm.resetFields();
            this.$message({
              message: '修改成功',
              type: 'success',
              duration:1000
            });
            this.btnLoading = false;
            this.getList()
          }).catch(()=>{
            this.btnLoading = false;
          })
        }
      });
    },

  }

}
</script>

<style scoped lang="scss">


</style>
